<template>
  <div class="activeWrapper text-left">
    <zcHeader :isNav=isNav :id=id></zcHeader>
    <div class="banner"></div>
    <div class="container" style="min-width: 1200px;padding: 0;margin-top: 30px;background-color: white">
    <div class="selectWrapper " style="min-width: 1200px">
      <div class="selectStatus container-fluid row" style="border-bottom: 1px solid gainsboro;width:100%;" >
        <div class="col-md-1 text-right lineH" >状态：</div>
        <div class="col-md-10 row" >
          <label class="col-md-2">
            <input type="checkbox"
                   @click="do_selectAll(0)"
                   v-model="checkFalseValue1[0].checkFalseValue"
                   :class="checkFalseValue1[0].addAllClass"

          > 全部</label>
          <div class="col-md-2" v-for="(item,index) in apply" :key="index">
            <input  type="checkbox" v-model="apply[index].canApply" :class="apply[index].canApply?'input':'input2'" @click="do_selectSubject(apply[index],index,0)">
            <span v-text="item.types"></span></div>
          <!--<div class="col-md-2"><input type="checkbox" v-model="noApply" :class="noApply?'input':'input2'"> <span>已结束</span></div>-->
        </div>
      </div>

      <div class="selectTypes container-fluid row"  style="border-bottom: 1px solid gainsboro;width:100%;">
        <div class="col-md-1 text-right lineH">类别：</div>
        <div class="col-md-10 row">
          <label class="col-md-2"><input type="checkbox"   @click="do_selectAll(1)" v-model="checkFalseValue1[1].checkFalseValue" :class="checkFalseValue1[1].addAllClass"> 全部</label>
          <label class="col-md-2" v-for="(item,index) in person" :key="index">
            <input type="checkbox"  v-model="person[index].checkedValue" :class="person[index].checkedValue?'input':'input2'" @click="do_selectSubject(person[index],index,1)">
            <span>{{item.types}}</span>
          </label>
        </div>
      </div>
<transition name="selectSubjects2">
  <div class="selectSubjects container-fluid row" :class="selectSubjectClass">
    <div class="col-md-1 text-right lineH">科目：</div>
    <div class="col-md-10 row">
      <label class="col-md-2"><input type="checkbox"  @click="do_selectAll(2)" v-model="checkFalseValue1[2].checkFalseValue" :class="checkFalseValue1[2].addAllClass" > 全部</label>
      <label class="col-md-2" v-for="(item,index) in subject" :key="index" >
        <input type="checkbox" v-model="subject[index].checkedValue" :class="subject[index].addInputClasses"  @click="do_selectSubject(subject[index],index,2)">
        <span v-text="item.name"></span></label>
    </div>
    <div class="col-md-1 allSubject" @click="def_allSubject">
      <span :class="allSubject?'span':'dd'">全部</span>
    </div>
  </div>
</transition>

    </div>
      <div class="searchWrapper container-fluid row" >
        <div class="icon"><img src="../../static/RSImg/icon-img1.png" alt=""></div>
        <input type="text" placeholder="请输入活动关键字" v-model="keywordQury">
        <div class="button"><button @click="do_keywordQury">搜索</button></div>
      </div>
      <div class="container-fluid row" style="height: 50px;top: 20px;position: relative">
      <div class="col-md-11" ></div>
        <div class="col-md-1 menu" style="  cursor:pointer;" @click="do_listChange">列表切换</div>
      </div>
      <!--===================列表================-->
      <div class="contentWrapper container-fluid row" v-show="listChange">

        <div class="col-md-4" style="padding: 0px 10px;position: relative;height: 300px" v-for="(item,index) in dataList" :key="index">
          <div class="bgImg" style="height:170px" :style="def_backImg">
            <!--<img :src="zcDomain+'/static/RSImg/'+getImgUrl+'.png'" alt="" style="width: 100%" >-->
            <span v-text="item.isCanWrite?'可申报':'已结束'"></span>
            <p class="text-center" style="top: 50px;" v-text="item.SelectLearnStage"></p>
            <p class="text-center" style="top:100px;" id="pTitle" v-text="item.SelectSubjects" ></p>
          </div>
          <div class="discreb">
            <div class="contentTitle" v-text="item.Name" ></div>
            <div class="info  row">
              <p class=" col-md-8"><span>时间:</span><span v-text="item.StartDate"></span>~<span v-text="item.EndDate"></span></p>
              <p class=" col-md-4" style="text-align: right;padding-right: 15px"><span >已申报:</span><span style="margin-right: 10px" v-text="item.WriteNumber"></span></p>
            </div>
            <div @click="do_goDetail(item)"><a  style="color: #41bafe;cursor:pointer;">查看详情</a></div>
          </div>
        </div>
      </div>
      <div class="contentWrapper2 container-fluid row" v-for="(item,index) in dataList" :key="index" v-show="!listChange" >
        <div class="col-md-10" >
          <h6 v-text="item.Name"></h6>
          <div class="listContent" >
            <ul>
              <li><span >学段范围:</span><span v-text="item.SelectLearnStage"></span></li>
              <li><img src="../../static/RSImg/time.png" alt=""><span>开始时间:</span><span v-text="item.StartDate"></span></li>
            </ul>
            <ul>
              <li><span>资源类型:</span><span v-text="item.ProjectType"></span></li>
              <li><img src="../../static/RSImg/time.png" alt=""><span>结束时间:</span><span v-text="item.EndDate"></span></li>
            </ul>
            <ul>
              <li><span class="spanOver">学科范围: <span :title="item.SelectSubjects">{{item.SelectSubjects}}</span>
              </span></li>
              <li><span>状态:</span><span v-text="item.isCanWrite?'可申报':'已结束'"></span></li>
            </ul>
          </div>
        </div>
        <div class="col-md-2 btn-flx">
          <button :class="item.isCanWrite?'canApply':'c'" @click="do_goDetail(item)">查看详情</button>
        </div>
      </div>
      <cmNodata_model v-if="noInfo"></cmNodata_model>
      <div class="publish_page">
        <div class="pageSelect">
          <div>
            <button @click="do_addPage(-1)">上一页</button>
            <ul>
              <li v-for="(item,index) in pageList" :key="index"  :class="pageActive[index]"
                  v-text="item.name" @click="do_PageQry(item.name,index)"></li>
            </ul>
            <button @click="do_addPage(1)">下一页</button>
          </div>
        </div>
        <div class="pageRight" >
          <i>总共 <span v-text="pages">2</span>页</i>
          <i>到 <input type="text" v-model="curPage">页</i>
          <button @click="do_addPage(2)">确定</button>
        </div>
      </div>
  </div>
    <zcFooter></zcFooter>
    <transition name="fade">
      <cmCofirm
        title="错误"
        confirm="确定"
        :msg=mistakeMsg
        @confirm1="def_confirm($event)"
        v-if="mistake"
      >
      </cmCofirm>
    </transition>

  </div>
</template>

<script>
  import cmCofirm from './common/cmCofirm'
  import zcHeader from './zcHeader'
  import zcFooter from './zcFooter'
  import cmNodata_model from './common/cmNodata_model'
    export default {
      name: "bsActivePage.vue",
      components: {
        cmCofirm,
        zcHeader,
        zcFooter,
        cmNodata_model
      },
      data() {
        return {
          noInfo: false,
          id: 2,
          isNav: true,
          mistake: false,
          mistakeMsg: '',
          person: [{checkedValue: false, types: '优质课展评'}, {checkedValue: false, types: '优秀课例评选'}, {
            checkedValue: false,
            types: '优秀论文'
          }],
          checkFalseValue1: [{checkFalseValue: false, addAllClass: 'input2'}, {
            checkFalseValue: true,
            addAllClass: 'input'
          }, {checkFalseValue: true, addAllClass: 'input'}],
          apply: [{canApply: true, types: '可申报'}, {canApply: false, types: '已结束'}],
          selectSubjectClass: '',
          allSubject: false,
          answer: [],
          subject: [],
          subjects: {},
          dataList: [],
          page: 1,
          pages: '',
          pageList: [],
          countNumber1: 0,
          pageActive: ['pageActive'],
          curPage: '',
          countChek: 1,
          /*查询条件*/
          Subject: '',
          FW: 1,
          PageNum: 20,
          ResourceModel: '',
          keywordQury: '',
          getImgUrl: '',
          zcDomain: this.$ZcPublic.Domain,
          listChange: false,
          mistakeNum: '',
          interval: null,
          countNumber: '',
          number1: '',
          resourceSN: '',
          crPage: 1
        }
      },
      created() {
        try {
          let me = this
          sessionStorage.setItem('browserNew', false)
          me.$ZcPublic.browserNew = sessionStorage.getItem('browserNew')
          me.$ZcPublic.UserId = localStorage.getItem('UserId')
          me.ResourceModel = sessionStorage.getItem("projectType");

          console.log(me.ResourceModel)
          if (me.ResourceModel == '') {
            this.FW = 0
          }
          if (this.FW == 0) {
            this.apply[0].canApply = false;
            this.checkFalseValue1[0].checkFalseValue = true
            this.checkFalseValue1[0].addAllClass = 'input'
          }
          me.person.forEach((item, index) => {
            if (item.types == me.ResourceModel) {
              item.checkedValue = true
              this.$set(this.checkFalseValue1, 1, {checkFalseValue: false, addAllClass: 'input2'})
            }
          });

          console.log(me.$ZcPublic.UserId)
          me.$ZcPublic.Server.Post({
            IsNeedLogin: 'false',
            Paras: {
              Name: 'Vue_CustomerResource',
              Action: 'Ext_getProjectResoureSubject',
              Data: {
                name: '可申报'
              }
            },
            Callback: me.cb_Ext_getProjectResoureSubject,
            Scope: me
          });
          me.def_goPost()

        } catch (e) {
          // zcLogger.Log({
          //   Vue : 'zcPerson.vue',
          //   Fun : 'doAdd',
          //   Msg : e.message
          // });
        }
        /**/
      },
      computed: {
        def_backImg() {
          return "background-image:url(" + this.zcDomain + "/static/RSImg/" + this.getImgUrl + ".png);"
        },

      },
      methods: {
        def_goPost() {
          try {
            let me = this;
            return me.$ZcPublic.Server.Post({
              IsNeedLogin: 'false',
              Paras: {
                UserId: me.$ZcPublic.UserId,
                Name: 'Vue_CustomerResource',
                Action: 'Ext_ActivityPage_RS',
                Data: {
                  Page: me.page,
                  ActivityStr: {
                    "Title": me.keywordQury,
                    "PageNum": me.PageNum,
                    "FW": me.FW,
                    "ResourceModel": me.ResourceModel,
                    "Subject": me.Subject
                  }
                }
              },
              Callback: me.cb_Ext_ActivityPage_RS,
              Scope: me
            })
          } catch (e) {
            alert(e)
          }
        },
        def_allSubject() {
          this.allSubject = !this.allSubject
          if (this.allSubject == true) {
            this.selectSubjectClass = 'selectSubject2'
          } else {
            this.selectSubjectClass = 'selectSubject'
          }
        },
        def_confirm() {
          if (this.mistakeNum == 1) {
            this.mistakeNum = ''
            this.$ZcPublic.UserId = '';
            this.$router.replace('bsApplyDetail')
          }
          this.mistake = false
        },
        do_selectAll(index) {
          try {
            if (index == 0) {
              for (let i = 0; i < this.apply.length; i++) {
                this.apply[i].canApply = false;
              }
            }
            if (index == 1) {
              for (let i = 0; i < this.person.length; i++) {
                // this.person[i].checkedValue = false;
                this.$set(this.person, i, {checkedValue: false, types: this.person[i].types})
              }
            }
            if (index == 2) {
              for (let i = 0; i < this.subject.length; i++) {
                this.subject[i].addInputClasses = 'input2';
                this.subject[i].checkedValue = false;
              }
            }
            if (this.checkFalseValue1[index].checkFalseValue == false) {
              this.$set(this.checkFalseValue1, index, {
                checkFalseValue: !this.checkFalseValue1[index].checkFalseValue,
                addAllClass: 'input'
              })
              if (index == 2) {
                this.Subject = ''
              }
              if (index == 1) {
                this.ResourceModel = ''
              }
              if (index == 0) {
                this.FW = 0
              }
            } else {
              // this.$set(this.checkFalseValue1,index,{checkFalseValue:!this.checkFalseValue1[index].checkFalseValue,addAllClass:'input2'})
            }
            let me = this;
            me.def_goPost()
          } catch (e) {

          }
        },
        do_selectSubject(item, index, x) {
          let me = this
          try {
            me.checkFalseValue1[x].addAllClass = 'input2';
            me.checkFalseValue1[x].checkFalseValue = false;
            if (x == 2) {
              console.log(22222)
              console.log(me.subject[index].checkedValue)
              if (item.checkedValue == false) {
                // me.subject[index].checkedValue=true
                for (let i = 0; i < me.subject.length; i++) {
                  if (index == i) {
                    me.$set(me.subject, index, {addInputClasses: 'input', checkedValue: true, name: item.name})
                  }
                }
              } else {
                me.$set(me.subject, index, {addInputClasses: 'input2', checkedValue: false, name: item.name})
              }
              /*==============================科目条件查询===================*/
              for (let i = 0; i < me.subject.length; i++) {
                if (index == i) {
                  if (me.subject[i].checkedValue == true) {
                    if (me.Subject == '') {
                      me.Subject = me.subject[i].name
                    } else {
                      console.log('选择科目')
                      console.log(me.Subject)
                      if (me.Subject.indexOf(me.subject[i].name) >= 0) {
                      } else {
                        me.Subject = me.subject[i].name + ',' + me.Subject
                      }
                    }
                  } else {
                    let modelSplit = me.Subject.split(',')
                    for (let j = 0; j < modelSplit.length; j++) {
                      if (modelSplit[j] == me.subject[index].name) {
                        modelSplit.splice(j, 1)
                      }
                    }
                    let modelSplit2 = '';
                    for (let j = 0; j < modelSplit.length; j++) {
                      if (modelSplit2 == '') {
                        modelSplit2 = modelSplit[j]
                      } else {
                        modelSplit2 = modelSplit[j] + ',' + modelSplit2
                      }
                    }
                    me.Subject = modelSplit2;
                  }
                }
              }
            }
            if (x == 1) {
              for (let i = 0; i < me.person.length; i++) {
                if (index == i) {
                  if (me.person[i].checkedValue == false) {
                    if (me.ResourceModel == '') {
                      me.ResourceModel = me.person[i].types
                    } else {
                      console.log('选择的课列类型')
                      console.log(me.ResourceModel)
                      if (me.ResourceModel.indexOf(me.person[i].types) >= 0) {
                      } else {
                        me.ResourceModel = me.person[i].types + ',' + me.ResourceModel
                      }
                    }
                  } else {
                    let modelSplit = me.ResourceModel.split(',')
                    for (let j = 0; j < modelSplit.length; j++) {
                      if (modelSplit[j] == me.person[index].types) {
                        modelSplit.splice(j, 1)
                      }
                    }
                    let modelSplit2 = '';
                    for (let j = 0; j < modelSplit.length; j++) {
                      if (modelSplit2 == '') {
                        modelSplit2 = modelSplit[j]
                      } else {
                        modelSplit2 = modelSplit[j] + ',' + modelSplit2
                      }
                    }
                    me.ResourceModel = modelSplit2;
                  }
                }
              }
            }
            if (x == 0) {
              if (index == 0) {
                if (me.apply[0].canApply == false) {
                  if (me.apply[1].canApply == false) {
                    me.FW = 1
                  } else {
                    me.FW = 0
                  }
                } else {
                  if (me.apply[1].canApply == false) {
                    me.FW = 0
                  } else {
                    me.FW = 2
                  }
                }
              }
              if (index == 1) {
                if (me.apply[1].canApply == false) {
                  if (me.apply[0].canApply == false) {
                    me.FW = 2
                  } else {
                    me.FW = 0
                  }
                } else {
                  if (me.apply[0].canApply == false) {
                    me.FW = 0
                  } else {
                    me.FW = 1

                  }
                }
              }
            }
            /*==========判断前面三个全部是否变成选中=======*/
            if (me.FW == 0) {

              me.$set(me.checkFalseValue1, 0, {checkFalseValue: true, addAllClass: 'input'})
              if (x == 0) {
                if (me.apply[index].canApply == false) {
                  this.$set(this.checkFalseValue1, 0, {checkFalseValue: false, addAllClass: 'input2'})
                }
              } else {
                if (me.apply[0].canApply == true) {
                  this.$set(this.checkFalseValue1, 0, {checkFalseValue: false, addAllClass: 'input2'})
                }
              }
            }
            if (me.ResourceModel == '') {
              me.$set(me.checkFalseValue1, 1, {checkFalseValue: true, addAllClass: 'input'})
            }
            if (me.Subject == '') {
              me.$set(me.checkFalseValue1, 2, {checkFalseValue: true, addAllClass: 'input'})
            }
            me.def_goPost()
          } catch (e) {
            // console.log(e)
          }

        },
        do_goDetail(item) {
          try {
            localStorage.setItem("JumpKey", window.location.href)
            localStorage.setItem('resrourceSN', item.SN);
            sessionStorage.setItem('isCanWrite', item.isCanWrite);
            this.resourceSN = item.SN
            if (item.isCanWrite == true) {
              this.$router.push({name: 'bsApplyDetail', query: {resourceSN: this.resourceSN}})

            } else {
              /*===========活动控制==============*/
              let me = this
              /*================'ResourceInfo',"判断是否以前提交过"===========*/
              if (me.$ZcPublic.UserId == '' || me.$ZcPublic.UserId == null) {
                this.mistake = true;
                this.mistakeMsg = "活动已结束，请选择可申报活动！"
              } else {
                me.$ZcPublic.Server.Post({
                  IsNeedLogin: 'false',
                  Paras: {
                    UserId: me.$ZcPublic.UserId,
                    Name: 'Vue_CustomerResource',
                    Action: 'Ext_ResourceApplyInfo',
                    Data: {
                      "ProjectResourceSN": item.SN
                    }
                  },
                  Callback: me.cb_Ext_ResourceApplyInfo,
                  Scope: me
                });
              }

            }
          } catch (e) {
            alert(e)
          }

        },
        do_listChange() {
          this.listChange = !this.listChange;
          if (this.listChange == true) {
            this.PageNum = 6
          } else {
            this.PageNum = 20
          }
          this.def_goPost();
        },
        /*===========分页查询=====================*/
        do_PageQry(num, index) {
          this.interval = setInterval(this.getScrol, 5)
          this.pageActive = []
          let me = this
          for (let i = 0; i < 5; i++) {
            if (index == i) {
              this.pageActive.push('pageActive')
            } else {
              this.pageActive.push('no_pageActive')
            }
          }
          me.page = num;
          this.def_goPost();
        },
        getScrol() {
          if (document.documentElement.scrollTop < 380) {
            clearInterval(this.interval)
            return
          }
          if (document.documentElement.scrollTop < 450) {
            document.documentElement.scrollTop = document.documentElement.scrollTop - 10;
          } else {
            document.documentElement.scrollTop = document.documentElement.scrollTop - 40;
          }
        },
        do_addPage(index) {
          try {
            this.interval = setInterval(this.getScrol, 5)
            let me = this;
            if (index == -1) {
              if (me.page == 1) {
                me.page = 1;
                return
              } else {
                me.page--;
                if (me.page % 5 == 1) {
                  this.countNumber1 = me.page / 5 - 1

                }
              }
            }
            if (index == 1) {
              if (me.page == me.pages) {
                return
              } else {
                me.page++
                if (me.page % 5 == 1) {
                  //this.countNumber1=me.page/5
                }
              }
            }
            if (index == 2) {
              if (me.curPage <= 0) {
                this.mistake = true;
                me.mistakeMsg = '最低查询不得小于 1 页'
                return
              }
              if (me.curPage != parseInt(me.curPage)) {
                this.mistake = true;
                me.mistakeMsg = '请输入整数查询'
                return
              }
              if (this.curPage > me.pages) {
                this.mistake = true;
                this.mistakeMsg = "最大不超过" + this.pages + "页"

              } else {
                if (this.curPage == '') {
                  this.mistake = true;
                  this.mistakeMsg = '请输入查询页码'
                } else {
                  me.page = this.curPage
                }
              }
            }
            this.pageActive = []
            for (let i = 0; i < 5; i++) {
              if (me.page % 5 == i + 1) {

                this.pageActive.push('pageActive')
              } else {
                if (me.page % 5 == 0) {
                  this.pageActive[4] = 'pageActive'
                } else {
                  this.pageActive.push('no_pageActive')
                }
              }
            }
            me.def_goPost();
          } catch (e) {

          }
        },
        do_keywordQury() {
          let me = this
          me.def_goPost()
        },
        do_pageNumber() {

        },
        /*=========================回调================*/

        cb_Ext_ResourceApplyInfo(resJson, scope) {
          console.log('判断是否以前提交过')
          console.log(resJson)
          if (!resJson.success) {
            this.mistake = true;
            this.mistakeMsg = resJson.msg
          } else {
            if (resJson.data[0].IsSubmit == "false" || resJson.data[0].IsSubmit == null) {
              this.mistake = true;
              this.mistakeMsg = '活动已结束，请选择可申报活动！'
            } else if (resJson.data[0].IsSubmit == "true") {
              this.$router.push({name: 'bsApplyDetail', query: {resourceSN: this.resourceSN}})
            }
          }
        },
        cb_Ext_getProjectResoureSubject(resJson, scope) {

          try {
            console.log(resJson)
            if (this.countChek == 1) {
              this.subject = []
              for (let i = 0; i < resJson.data.length; i++) {
                // const list=resJson.data[key]
                this.subjects = {};
                this.subjects.name = resJson.data[i];
                this.subjects.checkedValue = false;
                this.subjects.addInputClasses = 'input2';
                this.subject.push(this.subjects)
              }
            }
            console.log('所有科目')
            console.log(this.subject)
            this.countChek++;
          } catch (e) {

          }
        },
        cb_Ext_ActivityPage_RS(resJson, scope) {
          try {
            console.log('活动资源');
            console.log(resJson);
            if (resJson.success == false) {
              // if(resJson.msg.indexOf("请传UserId参数")>=0){
              //   this.mistake=true;
              //   this.mistakeMsg="请登录"
              //   this.mistakeNum=1
              //   return
              // }
            } else {
              if (resJson.data.Data == '') {
                this.noInfo = true
              } else {
                this.noInfo = false
              }
              this.dataList = resJson.data.Data;
              this.dataList.forEach((item) => {
                if (item.ProjectType.indexOf("优质课展评") == 0) {
                  this.getImgUrl = 1
                }
                if (item.ProjectType.indexOf("优秀课例评选") == 0) {
                  this.getImgUrl = 2
                }
                if (item.ProjectType.indexOf("优秀论文") == 0) {
                  this.getImgUrl = 3
                }
              })
              this.pages = resJson.data.Pages;  //
              this.crPage = resJson.data.crPage;
              let count = 5
              if (this.number1 == '') {

              }
              this.number1 = resJson.data.Pages % 5;//余数
              this.countNumber = parseInt(resJson.data.crPage / 5);//当前第几页求模 7/5==1
              if (resJson.data.crPage % 5 == 0) {
                this.countNumber--
              }
              if (resJson.data.Pages <= 5) {
                count = resJson.data.Pages
              } else {
                if (this.countNumber == parseInt(this.pages / 5)) {
                  count = this.number1
                }
              }
              this.pageList = [];
              for (let i = 0; i < count; i++) {
                let numb = {};
                numb.name = this.countNumber * 5 + i + 1;
                this.pageList.push(numb)
              }
              console.log(7777777)
              console.log(this.pageList)
            }

          } catch (e) {

          }

        }
      },
      watch: {},
    }
</script>

<style scoped>
  @font-face {
    font-family: 'iconfont'; /* project id 1144889 */
    src: url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.eot');
    src: url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.woff2') format('woff2'), url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.woff') format('woff'), url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.ttf') format('truetype'), url('//at.alicdn.com/t/font_1144889_5tsu5viudr5.svg#iconfont') format('svg');
  }
  .left{
    float: left !important;
  }
  .right{
    float: right !important;
  }
  .container-fluid{
    margin: 0 !important;
    min-width: 1200px;
  }
  .banner{
    min-width: 1200px!important;
    height: 300px;
    background-position: top center;
    background-image: url(../assets/activity.png);
    background-size: 100% auto;
  }
.selectWrapper{
  border: 1px solid gainsboro;
  font-size: 13px;
  color: grey;
}
.col-md-2{
  position: relative;
  overflow: hidden;
  text-align: left;
}
  input{
    width:17px;
    height:17px;
    position: relative;
    top: 4px;
    left: -2px;
    border: 1px solid gainsboro;
    -webkit-appearance: none;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
  }
  .lineH{
    line-height: 30px;
  }
  .input:before{
    font-family: "iconfont" ;
    content: "\e63f" !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #41bafe !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: -10px 0px 0px -7px !important;
    z-index: 99 !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;

  }
  .allSubject{
    position: relative;
  }
  .allSubject span{
    position: absolute;
    display: inline-block;
    width: 60px;
    line-height: 30px;
    height: 30px;
    margin-left: 30px;
    cursor: pointer;
  }
  .allSubject span:before{
    font-family: "iconfont" ;
    content: "\e600";
    margin-right: 5px;
    font-size: 19px;
    margin-top: 2px;
  }
  .allSubject .span:before{
    font-family: "iconfont" ;
    content: "\e604";
    margin-right: 5px;
    font-size: 19px;
    margin-top: 2px;
  }
  .selectSubjects{
    height: 30px;
    overflow: hidden;
  }
  /*.selectSubjects2{*/
    /*height: 300px !important;*/
    /*overflow: hidden;*/
  /*}*/
  .selectWrapper>.selectSubject2{
    height: auto !important;
    overflow: hidden;
    /*border: 1px solid red;*/
  }
.searchWrapper {
  position: relative;
 top: 10px;
  height: 42px;
 min-width: 1200px;
  border: 1px solid gainsboro;
  display: flex;
}
  .searchWrapper div{
    flex: 0 0 50px;
  }
  .searchWrapper div img{
    width: 30px;
    height: 30px;
    margin: 5px 5px;
  }
  .searchWrapper input{
    flex: 1;
    height: 38px;
    border: none;
    outline: none;
    margin-top: -3px;
  }
  .searchWrapper .button{
    flex: 0 0 100px;

  }
  .searchWrapper button{
    width: 65px;
    height: 30px;
    line-height: 25px;
    border-radius: 5px;
    color: white;
    margin-top: 5px;
    border: none;
    outline: none;
    background-color:#41bafe ;
    margin-left: 15px;
    cursor: pointer;
  }
  .menu:before {
    font-family: "iconfont" ;
    content: "\e64a";
    margin-right: 5px;
    font-size: 19px;
    position: absolute;
    right: 79px;
    top:-1px;
    cursor:pointer;
  }
  .bgImg span{
    position: absolute;
    right: 10px;
    top: 0;
    width: 60px;
    height: 30px;
    background-color: rgba(0,0,0,.4);
    color: white;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
  }
  .bgImg p{
    position: absolute;
    width: 100%;
    font-size: 30px;
    color: white;
  }
  .discreb{
    width: 100%;
    padding-left: 5px;
    border: 1px solid gainsboro;
    border-top: none;
  }
  .discreb .contentTitle{
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*width: 100%;*/
  }
  .info p{
    color: #999;
    font-size: 14px;
  }
  .publish_page{
    width: 1200px;
    margin: 20px auto;
    height: 50px;
    display: flex;
  }
  .publish_page .pageSelect{
    flex: 1;
    position: relative;
  }
  .publish_page .pageSelect div{
    position: absolute;
    right: 0;
  }
  .publish_page .pageSelect div *{
    float: left;
  }
  .publish_page button{
    background-color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 15px;
    padding: 3px 8px;
    display: inline-block;
    color: #666;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 8px;
  }
  .publish_page button:hover{
    background-color: #41bafe !important;
    color: white;
  }
  .publish_page .pageRight{
    flex: 0 0 220px;
  }
  .pageSelect ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pageSelect ul li{
    border: 1px solid gainsboro;
    padding: 0 8px;
    margin: 4px 5px 0 0;
    height: 24px;
    line-height: 24px;
    border-radius: 4px;
    cursor: pointer;
  }
  i{
   font-style: normal;
  }
  .pageRight i{
    position: relative;
  }
  .pageRight i input{
    height: 30px;
    line-height: 30px;
    width: 45px;
    border: 1px solid gainsboro;

    position: relative;
    top: -2px;
  }
.pageActive{
  background-color:#41bafe ;
  color: white;
}
  .listContent{
    display: flex;
    flex-direction: row;
    justify-content: space-around;

  }
  .listContent ul{
    flex: 1;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .listContent ul:last-child{
    flex: 0 0 220px;
  }
  .spanOver{
    display: inline-block;
    width: 210px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .contentWrapper2{
    border: 1px solid gainsboro;
    padding: 20px 0;
  }
  .contentWrapper2 img{
    margin-right: 5px;
  }
  .listContent ul li{
    height: 28px;
    line-height: 28px;
    font-size: 15px;
    color: #999;


  }
  .listContent h6{
    font-size: 25px;
    font-weight: 900;
  }
  .btn-flx{
display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-flx button{
    height: 38px;
    line-height: 38px;
    padding: 0 10px;
    outline-color:  #ccc;
    border: none;
    cursor: pointer;
    background-color: #ccc;
    color: white;
  }
  .btn-flx .canApply{
    background-color: #41bafe;
    outline-color:   #41bafe;
  }
  .btn-flx .canApply:hover{
    background-color:    #6c757d;
    outline-color:  #6c757d
  }
  #pTitle{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  /*彈出框*/
  .fade-enter-active {
    transition: opacity .4s;
  }
  .fade-leave-active{
    transition: opacity .1s;
    }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;

  }


</style>
